import React from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import { Swiper, Image } from 'react-vant';
import style from './index.module.css'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const images = [
        '../src/assets/109_02.jpg',
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.TVV6j1m6GynrUaBOvEcJEwHaD4?w=310&h=180&c=7&r=0&o=5&dpr=1.3&pid=17',
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.jNLd9fEAux4K81v_-51FQAHaE7?w=269&h=184&c=7&r=0&o=5&dpr=1.3&pid=1.7'
    ]

    return (
        <div className={style.bei}>
            <NavBar
                title="中医调理"
                onClickLeft={() => navigate(-1)}
            />


            <Swiper>
                {images.map((image) => (
                    <Swiper.Item key={image}>
                        <Image lazyload src={image} style={{ height: '200px' }} />
                    </Swiper.Item>
                ))}
            </Swiper>

            <div className={style.box}>
                <div className={style.box1}>
                    <img src="../src/assets/109_03.jpg" alt="" />
                    <div style={{marginTop:'20px'}}>
                        <b>杨秋水专家名医工作室</b>
                        <p>内科杂病、妇科调理、前列泉炎</p>
                    </div>
                    <div style={{marginTop:'20px'}}>
                        <button className={style.btn}>点击咨询</button>
                    </div>
                </div>
                <div className={style.box1}>
                    <img src="../src/assets/109_06.jpg" alt="" />
                    <div style={{marginTop:'20px'}}>
                        <b>苗晓玲专家妇科团队</b>
                        <p>不孕不育、月经不调、卵巢早衰</p>
                    </div>
                    <div style={{marginTop:'20px'}}>
                        <button className={style.btn}>点击咨询</button>
                    </div>
                </div>
                <div className={style.box1}>
                    <img src="../src/assets/109_08.jpg" alt="" />
                    <div style={{marginTop:'20px'}}>
                        <b>王洪玲儿科专家团队</b>
                        <p>儿童呼吸感染,咳嗽生长发育迟缓</p>
                    </div>
                    <div style={{marginTop:'20px'}}>
                        <button className={style.btn}>点击咨询</button>
                    </div>
                </div>
                <div className={style.box1}>
                    <img src="../src/assets/109_03.jpg" alt="" />
                    <div style={{marginTop:'20px'}}>
                        <b>黄蜀教授皮肤工作室</b>
                        <p>银屑病,白癜风、等麻疹,各种皮肤问题</p>
                    </div>
                    <div style={{marginTop:'20px'}}>
                        <button className={style.btn}>点击咨询</button>
                    </div>
                </div>
                <div className={style.box1}>
                    <img src="../src/assets/109_06.jpg" alt="" />
                    <div style={{marginTop:'20px'}}>
                        <b>牟方祥专家名医工作室</b>
                        <p>免疫生殖性不良妊娠,系统性红斑狼疮</p>
                    </div>
                    <div style={{marginTop:'20px'}}>
                        <button className={style.btn}>点击咨询</button>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Index